<template>
    <div class="page dealEmergencyApply-page" data-page="examPageIndex" >
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()">
                <i class=" iconfont icon-APPicon_guanbi" style="font-size: 16px;"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">考试
            </div>
        </div>
        <div class="page-content">
            <div class="startExam-content" id="startExamContent_{{getNewId}}">
                
            </div>
            <div class="startBtn"><button @click="goExam">开始考试</button></div>
            <div class="exam-tips">注意：只有一次考试机会</div>
        </div>
    </div>
</template>
<script>
return {
    data() {
        return {
            getNewId: (new Date()).getTime(),
        }
    },
    mounted() {
    
    },
    methods: {
        
        goExam:function(){
            let params={examDetailId:this.$route.params.id}
            let self=this
           Dao.startExam(params,function(res){
                app.router.navigate(`/examPage/${self.$route.params.id}`);
           })
        
        },
        getDetails:function(){
            let self=this
            let params={examDetailId:this.$route.params.id}
            Dao.getExamDetailById(params,function(res){
                var html=`<div class="startExam-content-inner">
                    <img src="${userInfor.headUrl==''?staticPath + 'img/mine/defaulticon.png':userInfor.headUrl}" style="width:74px;height:74px">
                    <div class="exam-name">${userInfor.name}</div>
                    <ul class="exam-details">
                        <li>${res.name}</li>
                        <li><span>总<em style="visibility:hidden">时</em>分</span> 100</li>
                        <li><span>及格线</span>${res.passLine}</li>
                        <li><span>总题数</span>${res.totalQuestion}</li>
                        <li><span>限<em style="visibility:hidden">时</em>时</span>${res.timeLimit}分钟</li>
                    </ul>
                </div>`
                $(`#startExamContent_${self.getNewId}`).append(html)
            })
        }
    },
    on:{
        pageInit:function(){
            var self = this;
                self.getDetails()
        }
    }
}
</script>
<style scoped>
    .page-content{
        height: calc(100% - 110px)
    }
    .link{
        color: #000000;
        font-size: 30px;
    }
    .startExam-content {
        padding: 20px;
    }

    .startExam-content-inner {
        padding: 30px 0 25px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(225, 225, 225, 0.9);
        box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
        border-radius: 6px;
        text-align: center;
    }

    .startExam-content img {
        width: 74px;
        height: 74px;
        border-radius: 50%;
        border: 1px solid #999999;
    }

    .exam-name {
        font-size: 16px;
        color: #000000;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .exam-details {
        border-top: 1px solid rgba(225, 225, 225, 1);
    }

    .exam-details li {
        padding: 10px 20px;
        font-size: 14px;
        color: #333333;
        text-align: left;
    }

    .exam-details li:nth-child(1) {
        font-size: 16px;
        color: #000000;
    }

    .exam-details li span {
        margin-right: 15px;
        display: inline-block;
        width: 50px;
        text-align: right;
        color: #999999;
    }

    .startBtn {
        padding: 20px;
    }

    .startBtn button {
        height: 44px;
        background: rgba(36, 113, 202, 1);
        border-radius: 4px;
        line-height: 44px;
        border: 0;
        font-size: 14px;
        color: #FFFFFF;
    }

    .exam-tips {
        text-align: center;
        color: rgba(224, 119, 98, 1);
    }
</style>